* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media screen and (min-width: 750px) {
    html {
        font-size: 100px;
    }
}

@media screen and (max-width:750px) {
    html {
        font-size: 13.33vw;
    }
}

.zt {
    width: 7.5rem;
    height: 16rem;
    margin: 0 auto;
    position: relative;
    margin: 0 auto;
    background-color: #F9FBFC;
}

.top {
    width: 7.5rem;
    height: 1.76rem;
    background-color: #fff;
    position: relative;
}

.tool-pic {
    width: 6.77rem;
    height: .24rem;
    margin: 0 auto;
}

.tool-pic>img {
    width: 6.77rem;
    height: .24rem;
    margin-top: .16rem;
    position: absolute;
    top: 0;
}

.top .zj>span {
    font-size: .35rem;
    font-weight: 700;
    color: #323038;
    margin-left: 3rem;
    text-align: center;
    /* display: inline-block; */
    /* background-color: aqua; */
}

.top .zj {
    position: relative;
    width: 7.5rem;
    /* display: flex;
    flex-wrap: nowrap;
    flex-direction: row; */
}

.zj .aside {
    width: 1.9rem;
    height: 1.3rem;
    position: absolute;
    right: .3rem;
    top: .15rem;
}

.zj .aside>img {
    width: 1.76rem;
    height: .66rem;
}

.zj .aside .icon>a {
    text-decoration: none;
}

.zj .aside .icon {
    width: 1.6rem;
    height: .6rem;
    padding-left: .03rem;
    position: absolute;
    top: .2rem;
    right: .23rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}


/* zj .aside .icon>a:nth-child(1)>img {
    width: .08rem;
    height: .08rem;
}

zj .aside .icon>a:nth-child(2)>img {
    width: .08rem;
    height: .08rem;
} */

.middle {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 5rem;
    right: 1.05rem;
}

.middle>p:nth-child(1) {
    font-size: .40rem;
    font-weight: 700;
    color: #323038;
}

.middle>p:nth-child(2) {
    font-size: .2rem;
    color: gray;
    padding-top: .2rem;
    padding-bottom: .6rem;
}

.role-choose>ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.role-choose>ul>li>a {
    text-decoration: none;
    margin: 0 auto;
    background-color: #fff;
    width: 1.5rem;
    border-radius: .2rem;
}

.role-choose>ul>li>a>img {
    padding-top: .1rem;
    padding-left: .12rem;
    width: 1.3rem;
    height: 1.3rem;
}

.role-choose>ul>li>span {
    margin-top: .1rem;
    text-align: center;
    font-size: .3rem;
    font-weight: 700;
    color: #323038;
}

.role-choose>ul>li {
    width: 1.8rem;
    height: 2.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: space-around;
    /* background-color: chartreuse; */
}


/* .role-choose>ul>li:nth-child(1) {
    width: .5rem;
    height: 1.3rem;
    background-color: bisque;
}

.role-choose>ul>li:nth-child(2) {
    width: .5rem;
    height: 1.3rem;
    background-color: bisque;
}

.role-choose>ul>li:nth-child(3) {
    width: .5rem;
    height: 1.3rem;
    background-color: bisque;
} */

.complete {
    position: absolute;
    top: 14.5rem;
    width: 7.5rem;
    height: 1rem;
    /* background-color: coral; */
}

.complete .container {
    margin: 0 auto;
    width: 5rem;
    height: 1rem;
    text-align: center;
    /* background-color: cyan; */
}

.complete .container .yuanjiao {
    width: 5rem;
    height: 1rem;
    opacity: 10%;
    background-color: #0155FF;
    border-radius: .5rem;
    text-align: center;
}

.complete .container>a>span {
    font-size: .4rem;
    display: block;
    color: #1764ff;
    position: relative;
}

.complete .container>a {
    text-decoration: none;
    position: absolute;
    top: .3rem;
    right: 3rem;
    /* display: flex;
    flex-direction: column;
    align-items: center; */
}